<template>
  <div>
    <el-date-picker  v-model="state.year"  type="year" placeholder="选择年份"  @change="yearChange" value-format="YYYY" />
    &nbsp;&nbsp;&nbsp;
    <el-radio-group v-model="state.quarterStr" @change="jiDuChange">
      <el-radio-button label="第1季度" value="1" />
      <el-radio-button label="第2季度" value="2" />
      <el-radio-button label="第3季度" value="3" />
      <el-radio-button label="第4季度" value="4" />
    </el-radio-group>
    <br /><br />
    <table class="mytable">
      <tr>
        <th style="width: 20%">仓库名称</th>
        <td style="width: 80%">填报情况</td>
      </tr>
      <tr v-for="(item,index) in state.snapshotCangKu">
        <td>
          <span :class="{success : item.hgStatus === 1, warning : item.hgStatus === 0 && item.tbStatus === 1, error : item.tbStatus === 0}">{{item.cWhName}}</span>
        </td>
        <td>
          <span v-if="item.tbStatus === 1">填报率{{item.chouchalv}}% 重复率{{item.chongfulv}}% </span>
          <span class="error" v-else>未填报</span>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup name="plantongjionce">
import request from '/@/utils/request';
import dayjs from "dayjs";
import {reactive, ref, onMounted, onUnmounted, defineAsyncComponent, defineProps, nextTick} from "vue";

let props = defineProps({
  planId : {type : Number, default: 0}
})
const now = dayjs();
let quarter = ref(Math.floor(now.month() / 3) + 1);
const state = reactive({
  year : now.format('YYYY'),
  quarterStr : '第' + quarter.value + '季度',
  snapshotCangKu:[],
})
const yearChange = ()=>{
  loadData();
}
const jiDuChange = (value)=>{
  if(value.indexOf("1")!== -1) quarter.value = 1
  if(value.indexOf("2")!== -1) quarter.value = 2
  if(value.indexOf("3")!== -1) quarter.value = 3
  if(value.indexOf("4")!== -1) quarter.value = 4
  loadData();
}
const loadData = ()=>{
  request({
    url: '/plan/getplancangkujidu',
    data: {id : props.planId, year : state.year, quarter:quarter.value.toString()}
  }).then( res =>{
    const { data } = res
    state.snapshotCangKu = data
  })
}
onMounted(()=>{
  loadData();
  nextTick(()=>{

  })
})
</script>

<style scoped>
span.error{
  color: #c45656;
}
span.success{
  color: #32a99e;
}
span.warning{
  color: #b88230;
}
</style>
